/**
 * DistrictsDialog
 */
/*
 * 
 * 1.外部调入 ./components/Recognize/index  saveRecognizeProperty(data)函数  传入数据
 * 
 * */
  var React = require("react");
  var tool = require("../../../utils/tool");
  var districtsData = require("../../../data/districts.json");
  var DistrictsHelper = require("../../../utils/DistrictsHelper");
  var DistrictsDialog = React.createClass({
    getDefaultProps: function (){
        return {
            root: {},
            data: {}
        }
    },
    getInitialState: function (){
        return {
            cities: [],
            invalid: true
        }
    },
    componentWillMount: function (){
        var data = this.props.data;
        if (data && !tool.isEmptyObject(data)){
            var cities = [].concat(data.cities) || [];
            if (cities.indexOf(districtsData.stateCode) != -1){
                cities = DistrictsHelper.getCitycodes();
            }
            this.setState({
                cities: cities,
                invalid: !cities.length
            });
        }

        this.stateCode = districtsData.stateCode;
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.setState({
            positionLimitDialog: ""
        });
    },
    handleOnSubmit: function (type, e){
        var cities = this.state.cities;

        if (cities.length === districtsData.length){
            cities = [districtsData.stateCode];
        }

        var param = {};
        param[type] = cities;

        this.saveData(param);
        this.handleOnCloseDialog();
    },
    handleOnChangeCity: function (type, provinceAdcode, e){
        var element = $(e.target), cityCode = element.val(), isChecked = element.is(":checked");
        var selectedCities = this.state.cities;

        selectedCities = DistrictsHelper.getSelectedDistricts(type, cityCode, provinceAdcode, isChecked, selectedCities);

        this.setState({
            cities: selectedCities,
            invalid: !selectedCities.length
        });
    },
    saveData: function (param){
        var data = this.props.data;
        var root = this.props.root;
        root.saveRecognizeProperty({
            position_limit: $.extend(data, param)
        });
    },
    render: function (){
        var districts = DistrictsHelper.getCheckedDistricts(this.state.cities);
        var list = districts.districts, stateChecked = districts.stateChecked;

        var citiesNode =
            <div>
                <div className="province-item">
                    <input checked={ stateChecked } onChange={ this.handleOnChangeCity.bind(this, "state", this.stateCode) } id={ this.stateCode } type="checkbox" name="state" value={ this.stateCode } />
                    <label htmlFor={ this.stateCode }>中国（包括港、澳、台）</label>
                </div>
                {
                    list.map(function (province){
                        var cityNode = province.districts.length ?
                            (<div className="city-region">
                                {
                                    province.districts.map(function (city){
                                        return (
                                            <span key={ city.adcode } className="city-item">
                                                <input onChange={ this.handleOnChangeCity.bind(this, "city", province.adcode) } checked={ city.checked } id={ city.adcode } type="checkbox" name="city" value={ city.citycode } />
                                                <label htmlFor={ city.adcode }>{ city.name }</label>
                                            </span>
                                        )
                                    }.bind(this))
                                }
                            </div>) : "";

                        return (
                            <div key={ province.adcode }>
                                <div className="province-item">
                                    <input onChange={ this.handleOnChangeCity.bind(this, "province", province.adcode) } checked={ province.checked } id={ province.adcode } type="checkbox" name="province" value={province.citycode} />
                                    <label htmlFor={ province.adcode }>{ province.name }</label>
                                </div>
                                { cityNode }
                            </div>
                        )
                    }.bind(this))
                }
            </div>

        return (
            <div className="dialog-wrap">
                <div className="dialog-overlay"></div>
                <dialog>
                    <div className="dialog-content">
                        <div className="title-region">
                            <i className="city-icon"></i>
                            <span>城市列表</span>
                        </div>
                        <div className="content-region">
                        { citiesNode }
                        </div>
                        <div className="button-region">
                            <button disabled={ this.state.invalid } className="button" onClick={ this.handleOnSubmit.bind(this, "cities") }>确定</button>
                        </div>
                    </div>
                    <a href="#" className="modal-close icon-close" onClick={ this.handleOnCloseDialog }></a>
                </dialog>
            </div>
        )
    }
  });

  module.exports = DistrictsDialog;
